import { Modal, Form, message } from 'antd';
import ProForm, { ProFormText, ProFormTextArea, ProFormDigit, ProFormRadio } from '@ant-design/pro-form';
import { save, update } from '@/services/system/resource/module';
import {SystemDictSelect} from '@/components/system/dict'

const SystemModuleForm = (props) => {

  const [form] = Form.useForm();
  const { formVisible, onSubmit, onCancel, values } = props;

  const saveHandle = async (formValue) => {
    const data = await save(formValue);

    if (data.success) message.success('新建系统模块成功!');
    else message.error('新建系统模块失败!');
  };

  const updateHandle = async (formValue) => {
    const data = await update(formValue);

    if (data.success) message.success('修改系统模块成功!');
    else message.error('修改系统模块失败!');
  };

  const okHandle = async () => {
    const fieldsValue = await form.validateFields();
    const formValue = { ...values, ...fieldsValue };

    if (formValue.id) await updateHandle(formValue);
    else await saveHandle(formValue);

    onSubmit();
  }

  return (
    <Modal
      destroyOnClose
      title={values.id ? '修改系统模块信息' : '新增系统模块信息'}
      visible={formVisible}
      onOk={okHandle}
      onCancel={onCancel}
    >
      <ProForm 
        initialValues={values} 
        form={form} submitter={false}
        layout={'horizontal'} labelCol= { {span: 6} } wrapperCol= { {span: 18} }
      >
        <Form.Item label="系统类型" name="type" rules={[{ required: true, message: '请选择系统类型!' }]}>
          <SystemDictSelect parentValue="system_module_type"/>
        </Form.Item>

        <ProFormText  name="name" label="系统名称" 
          rules={[{ required: true, message: '请输入系统名称!' }, {max: 50, message: '系统名称过长!'}]}
        />
        <ProFormText  name="icon" label="系统图标" rules={[{max: 50, message: '系统图标过长!'}]}/>
        <ProFormDigit name="sort" label="系统排序" min={1} max={10000} defaultValue={1} rules={[{ required: true, message: '请输入字典排序!' }]}/>
        <ProFormTextArea  label="系统简介" name="remark" rules={[ {max: 100, message: '备注过长!'}]}/>
        <ProFormRadio.Group  
          name="isGuide" label="引导页面" 
          options={[
            { value: 'YES', label: '是', },
            { value: 'NO', label: '否', },
          ]}
          initialValue="NO"
          tooltip="当有系统模块需要引导页面时，登陆后会跳转到引导页面"
          rules={[{ required: true, message: '请选择引导页面!' }]}
        />
        <ProFormRadio.Group  
          name="showType" label="展示方式" 
          options={[
            { value: 'SELF', label: 'SELF', },
            { value: 'BLANK', label: 'BLANK', },
          ]}
          initialValue="SELF"
          tooltip="a标签中target的值类型"
          rules={[{ required: true, message: '请选择展示方式!' }]}
        />
        <Form.Item noStyle shouldUpdate>
          {(form) => {
            return form.getFieldValue('showType') === 'BLANK' ? (
              <ProFormText  name="blankPath" label="跳转路径" 
                tooltip="当系统展示方式为BLANK时，设置舔砖路径"
                rules={[{ required: true, message: '请输入跳转路径!' }, {max: 200, message: '跳转路径过长!'}]}
              />
            ) : null;
          }}
        </Form.Item>
      </ProForm>
    </Modal>
  );
}

export default SystemModuleForm;